<template>
	<view class="page_box">
		<view class="header" style="color: #000000;" @tap="goBack(id)">
			<view class="arrow">
			</view>
			<view class="title">
				舞台信息
			</view>
		</view>


		<view class="h20" style="background-color: #F8F8F8; width: 100%;">
		</view>

		<view class="pt40 pl20" style="background-color: #FFFFFF;">
			<view class="center">
				示列图
			</view>
			<view class="flex justify-around">
				<image class="w220 h220 r20" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/wt.png" mode=""></image>
				<image class="w220 h220 r20" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/wt2.png" mode=""></image>
				<image class="w220 h220 r20" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/wt3.png" mode=""></image>
			</view>
			<view class="flex justify-around margin-top margin-bottom">
				<text class="dis">长：10.6m</text>
				<text class="dis">宽：2.4m</text>
				<text class="dis">高：10.3m</text>
			</view>
		</view>

		<view class="h20" style="background-color: #F8F8F8; width: 100%;">
		</view>


		<block v-if="upload == 1">
			
			<view class="center" style="background-color: #FFFFFF;">
				<text>舞台图</text>
				<view class="flex justify-around">
					<view class="">
						<u-upload @on-success="uploadImageA" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							长:
							<input type="text" v-model="chang" style="font-size: 24rpx;" placeholder="请输入长度米" />
						</view>
					</view>
					<view class="">
						<u-upload @on-success="uploadImageB" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							宽:
							<input type="text" v-model="kuang" style="font-size: 24rpx;" placeholder="请输入宽度米" />
						</view>
					</view>
					<view class="">
						<u-upload @on-success="uploadImageC" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							高:
							<input type="text" v-model="gaodu" style="font-size: 24rpx;" placeholder="请输入高度米" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="btome" style="background-color: #F8F8F8;color: #A0A0A0;">
				<u-icon name="info-circle-fill" color="#A0A0A0"></u-icon>
				<text class="margin-left">高度为舞台到吊顶之间的高度，上传数据请保留小数点后一位</text>
			</view>
			
			<view class="btn-bgc">
				<view class="wh90 btomBgc" @click="submit(1)">
					保存
				</view>
			</view>
			
		</block>
		
		
		<block v-for="(item,index) in wutai" :key="index">
			
			<view class="center" style="background-color: #FFFFFF;">
				<text>舞台图</text>
				<view class="flex justify-around">
					<view class="">
						<u-upload  :file-list="fileList1" @on-remove="onRemove1"  @on-success="uploadImageA1" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							长:
							<input type="text" v-model="item.chang" style="font-size: 24rpx;" placeholder="请输入长度" />
						</view>
					</view>
					<view class="">
						<u-upload :file-list="fileList2" @on-remove="onRemove2" @on-success="uploadImageB2" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							宽:
							<input type="text" v-model="item.kuang" style="font-size: 24rpx;" placeholder="请输入宽度" />
						</view>
					</view>
					<view class="">
						<u-upload :file-list="fileList3" @on-remove="onRemove3" @on-success="uploadImageC3" max-count="1" :action="action"></u-upload>
						<view class="flex align-center">
							高:
							<input type="text" v-model="item.gaodu" style="font-size: 24rpx;" placeholder="请输入高度" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="btome" style="background-color: #F8F8F8;color: #A0A0A0;">
				<u-icon name="info-circle-fill" color="#A0A0A0"></u-icon>
				<text class="margin-left">高度为舞台到吊顶之间的高度，上传数据请保留小数点后一位</text>
			</view>
			
			<view class="btn-bgc">
				<view class="wh90 btomBgc" @click="submit(2)">
					保存
				</view>
			</view>
			
		</block>

		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: this.$UPLOAD,
				loceng: '', // 楼层信息
				chang: '', // 长
				kuang: '', // 宽
				gaodu: '', // 高
				wutai:[],
				fileList1: [{
					url: ''
				}],
				fileList2: [{
					url: ''
				}],
				fileList3: [{
					url: ''
				}],
				iamge1: '',
				iamge2: '',
				iamge3: '',
				upload: 1,
				img: this.$images,
			};
		},
		onShow() {},
		onLoad(e) {
			
			if (uni.getStorageSync('wutai')) {
				var list = uni.getStorageSync('wutai')
				this.upload = 2
				this.wutai = list
				this.fileList1[0].url = this.img + this.wutai[0].iamge1
				this.fileList2[0].url = this.img + this.wutai[0].iamge2
				this.fileList3[0].url = this.img + this.wutai[0].iamge3
				console.log('==>', this.wutai);
				console.log('this.img==>', this.img);
			}
		},
		methods: {
			goBack(id) {
				console.log(id)
				uni.navigateBack({
					delta: 1
				})
			},
			
			uploadImageA(e) {
				this.iamge1 = e.data.url
			},
			
			uploadImageB(e) {
				this.iamge2 = e.data.url
			},
			
			uploadImageC(e) {
				this.iamge3 = e.data.url
			},
			
			onRemove1(index, lists) {
				this.wutai[0].iamge1 = ''
			},
			
			onRemove2(index, lists) {
				this.wutai[0].iamge2 = ''
			},
			
			onRemove3(index, lists) {
				this.wutai[0].iamge3 = ''
			},
			
			
			uploadImageA1(e) {
				this.wutai[0].iamge1 = e.data.url
			
			},
			
			uploadImageB2(e) {
				this.wutai[0].iamge2 = e.data.url
			},
			
			uploadImageC3(e) {
				console.log('e==>', e);
				this.wutai[0].iamge3 = e.data.url
			},
			
			
			
			
			// uploadImageA(e) {
			// 	this.iamge1 = e.data
			
			// },
			
			// uploadImageB(e) {
			// 	this.iamge2 = e.data
			
			// },
			
			// uploadImageC(e) {
			// 	this.iamge3 = e.data
			// },
			
			submit(e) {
				this.upload = e
				
				if (this.upload == 1) {
					var obj = {
						iamge1: this.iamge1,
						iamge2: this.iamge2,
						iamge3: this.iamge3,
						chang: this.chang,
						kuang: this.kuang,
						gaodu: this.gaodu,
					}
					this.wutai = [obj]
					
					uni.setStorageSync('wutai', this.wutai)
					
					uni.navigateBack({
						delta: 1
					})
					console.log('22222222',this.wutai)
					
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.wutai = this.wutai; //修改上一页data里面的searchVal参数值为1211
				} else {
					
					var obj = {
						iamge1: this.wutai[0].iamge1,
						iamge2: this.wutai[0].iamge2,
						iamge3: this.wutai[0].iamge3,
						chang: this.wutai[0].chang,
						kuang: this.wutai[0].kuang,
						gaodu: this.wutai[0].gaodu,
					}
					this.wutai = [obj]
					
					uni.setStorageSync('wutai', this.wutai)
					
					
					uni.navigateBack({
						delta: 1
					})
					
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.wutai = this.wutai; //修改上一页data里面的searchVal参数值为1211
				}
				
				
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content_box {}
	

	.header {
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		display: flex;
		align-items: center;
		// padding-left: 10rpx;
		padding-top: 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		background: #FFFFFF;

		.arrow {
			position: relative;
			display: inline-block;
		}

		.arrow::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0px;
			border-bottom: solid 2px #2C2C2C;
			border-left: solid 2px #2C2C2C;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -4px;
			margin-left: 28rpx;
		}

		.title {
			margin: 0 auto;
		}
	}

	.center {
		margin: 40rpx 20rpx 10rpx;
	}

	.dis {
		display: block;
	}
	
	.btome {
		margin-top: 30rpx;
		padding-top: 30rpx;
		padding-left: 20rpx;
		background-color: #F8F8F8;
	}
	
	.btn-bgc {
		width: 100%;
		height: 400rpx;
		background-color: #F8F8F8;
	}
	
	.btomBgc {
		margin: 200rpx auto 0rpx;
		height: 90rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		background: #54599B;
		border-radius: 45px;
	}
</style>
